import {
  CockpitChartBaseProps,
  legendCommonConfig,
  lineChartGridCommonConfig,
} from "../helps";
import React from "react";

export interface ProjectDistributionPieChartProps
  extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getProjectDistributionPieChartOption = ({
  dataSource = [],
  img,
}: ProjectDistributionPieChartProps): EChartsOption => {
  const color = ["#FEE409", "#2BE872", "#2CFFFF", "#7E00F3", "#FD850B"];
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  const nameMap = dataSource.reduce<Record<string, number>>((memo, cur) => {
    if (cur.name) {
      memo[cur.name] = cur.amount || 0;
    }

    return memo;
  }, {});
  return {
    grid: {
      ...lineChartGridCommonConfig,
    },

    color: color,

    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 103,
            height: 103,
          },
          left: "center",
          top: "15%",

          //   position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },
    legend: {
      ...legendCommonConfig,
      right: undefined,
      top: undefined,

      textStyle: {
        color: "#FDFFFF",
        fontSize: 12,
        lineHeight: 14,
        rich: {
          a: {
            verticalAlign: "middle",
          },
          b: {
            color: "#ffffff",
            fontSize: 14,
            width: 62,
            fontFamily: "Arial",
          },
          c: {
            color: "#ffffff",
            fontSize: 14,
            fontFamily: "Arial",
          },
        },
        // 上 有 下 左边
        padding: [0, 0, -2, 0],
      },
      orient: "vertical",
      left: "center",
      bottom: 24,

      data: dataSource.map((d) => d.name || ""),
      icon: "circle",
      formatter: (name) => {
        const itemAmount = nameMap[name];
        // const name = params;
        return `{a|${name} }{b|${(((itemAmount || 0) * 100) / total).toFixed(
          2
        )}%}{c|${itemAmount}个}`;
        return `123`;
      },
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "项目分析",
        type: "pie",
        clockwise: false,

        radius: [65, 69],

        center: ["50%", "30%"],

        itemStyle: {
          borderRadius: 30,
          shadowBlur: 20,
        },
        label: {
          show: false,
        },
        data: dataSource.reduce<any[]>((memo, cur, i) => {
          memo.push(
            {
              ...cur,
              value: cur.amount || 0,

              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 20,
                  borderColor: color[i],
                  shadowColor: color[i],
                },
              },
            },
            {
              value: 2,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
          return memo;
        }, []),
      },
    ],
  };
};

const ProjectDistributionPieChart = ({
  reactEChartsProps,
  dataSource,
  img,
}: ProjectDistributionPieChartProps) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "350px",
      }}
      option={getProjectDistributionPieChartOption({
        dataSource,
        img,
      })}
    />
  );
};

export default ProjectDistributionPieChart;
